<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
				<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>
	
	<body ng-app="promotionApp" ng-controller="promotionCtrl">
		<table class="table table-bordered">
			<tr>
				<td>序号</td>
				<td>ID</td>
				<td>名称</td>
				<td>价格</td>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active isActivePage(page)}">
					<a href ng-click="selectedPage(page)" >{{page}}</a>
				</li>
				<li>
					<a href ng-click="next()">下一页</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			
				var app = angular.module("promotionApp", []);
				app.controller("promotionCtrl", ["$scope","$http",
				function($scope,$http){
					$scope.currentPage = 1;
					$scope.pageSize = 4;
					$scope.totalCount = 0;
					$scope.totalPages = 0;
				
					//上一页
					$scope.prev=function(){
						$scope.selectedPage($scope.currentPage -1);
					}
					//下一页
					$scope.next=function(){
						$scope.selectedPage($scope.currentPage+1);
					}
					//指定页
					$scope.selectedPage=function(page){
						$http({
							method:"GET",
							url:"6-1.json",
							params:{
								page : page,
								pageSize: $scope.pageSize
							}
						}).success(function(data,status,headers,config){
							$scope.products = data.products;
						}).error(function(data,status,headers,config){
							alert("与管理员联系");
						})
					}
					//是否是当前页
					$scope.isActivePage=function(page){
						return page === $scope.currentPage;
					}
			
				
				}]);
		</script>
	</body>
</html>
